<template>
    <div class="form-item" @click.stop>
        <span class="cursor" :style="{display:select?'flex':'none'}">
                <Icon icon="iconamoon:move-thin" :style="{
                    color:'#fff'
                }"/>
        </span>
        <el-form-item 
            :class="[select,labelAlign]"
            @click.stop="setSelect"
            @mousedown="setSelect"
            :prop="getPropName()"
            :rules="rules"
        >
            <!-- 渲染实际表单组件 -->
                <template #label v-if="isShowTooltip ">
                    <span 
                        class="label" 
                        >
                        {{ field.type }}
                    </span>
                </template>
                <template #label v-else>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="field.id"
                        placement="top"
                        :show-after="500"
                    >
                    <span class="label">
                        {{ field.type }}
                        <!-- <span class="cursor">
                            <Icon icon="iconamoon:move-thin" :style="{
                                color:'#fff'
                            }"/>
                        </span> -->
                    </span>
                    </el-tooltip>
                </template>
            <slot/>
        </el-form-item>
        <div class="opt" v-if="!!select">
            <el-icon class="p-3" color="#fff" @click="handleUp"><ArrowUp /></el-icon>
            <el-icon class="p-3" color="#fff" @click="handleDown"><ArrowRight /></el-icon>
            <el-icon class="p-3" color="#fff" @click="handleDeleteItem"><Delete /></el-icon>
        </div>  
    </div>
</template>

<script setup>
import { computed, reactive} from 'vue';
import Icon from '@/components/icons/index.vue'

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    isShowTooltip:{
        type:Boolean,
        default:()=>false
    },
    formConfig:{
        type:Object,
        default:()=>({})
    },
    rules:{
        type:Array,
        default:()=>([])
    }
})

const state = reactive({
 
})

const labelAlign = computed(()=>{
    if (!!props.field.options.labelAlign) { //优先取私有配置
        return props.field.options.labelAlign
    }
    if (!!props.designer) {
        return props.designer.formConfig.labelAlign || 'label-left'
    } else {
        return props.formConfig.labelAlign || 'label-left'
    }
})


const select = computed(()=>{
    if(!props.designer) return ''
    if(props.designer.selectId === props.field.id){
        return 'select'
    }
    return ''
})

const setSelect = ()=>{
    if(!!props.designer){
        props.designer.setSelected(props.field)
    }  
}

const getPropName = ()=>{
    if (props.subFormItemFlag && !props.designState) {
        return props.subFormName + "." + props.subFormRowIndex + "." + props.field.options.name + ""
    } else {  
        return props.field.options.name
    }
}

const handleUp = ()=>{

}
const handleDown = ()=>{

}

const handleDeleteItem = ()=>{
    
}
</script>

<style lang="scss" >
.el-form-item{
    &.select{
        outline: 3px dashed #95fdb7;
    }
    &.label-left{
        .el-form-item__label{
                text-align: left;
                justify-content: flex-start;
            }
    }
    &.label-center{
        .el-form-item__label{
                text-align: center;
                justify-content: center;
            }
    }
    &.label-right{
        .el-form-item__label{
                text-align: right;
                justify-content: flex-end;
            }
    }
}
.form-item{
    position: relative;
    .cursor{
        cursor: move;
        z-index: 10;
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 25px;
        background-color:rgba(137, 255, 64, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom-right-radius: 5px;
    }
    .opt{
        display: block;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color:rgba(137, 255, 64, 0.6);
        border-top-left-radius: 5px;
        padding: 3px;
        .el-icon{
            &:hover{
                cursor: pointer;
                color:red;
            }
        }
    }
}
.label{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
